<!--
 * @Author: 菜鸟裹裹 675687356@qq.com
 * @Date: 2025-06-17 10:42:56
 * @LastEditors: 菜鸟裹裹 675687356@qq.com
 * @LastEditTime: 2025-06-18 17:46:38
 * @FilePath: /customer-service-web/src/views/home-page/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->


<template>
    <div class="form-container">
   <el-form :inline="true" :model="formInline"  label-width="170px" label-position="right" class="demo-form">
    <el-form-item label="供电单位">
      <el-input v-model="formInline.powerSupplyUnit" placeholder="请输入" clearable class="right-align-input" />
    </el-form-item>
    <el-form-item label="用户名称">
      <el-input v-model="formInline.userName" placeholder="请输入" clearable class="right-align-input"  />
    </el-form-item>
    <el-form-item label="用电地址">
      <el-input v-model="formInline.powerAddress" placeholder="请输入" clearable class="right-align-input" />
    </el-form-item>
     <el-form-item label="阶梯类型">
      <el-input v-model="formInline.stepType" placeholder="请输入" clearable  class="right-align-input"/>
    </el-form-item>
    <el-form-item label="电压等级">
      <el-input v-model="formInline.voltageLevel" placeholder="请输入" clearable class="right-align-input" />
    </el-form-item>
     <el-form-item label="运行容量">
        <el-input v-model="formInline.operationCapacity" placeholder="请输入" clearable class="right-align-input" />
    </el-form-item>
    <el-form-item label="用户类别">
        <el-input v-model="formInline.userCategory" placeholder="请输入" clearable  class="right-align-input"/>
    </el-form-item>
    <el-form-item label="计量点编号">
        <el-input v-model="formInline.meteringPointId" placeholder="请输入" clearable class="right-align-input" />
    </el-form-item>
     <el-form-item label="计量点位置">
        <el-input v-model="formInline.meteringPointLocation" placeholder="请输入" clearable class="right-align-input" />
    </el-form-item>
    <el-form-item label="含燃煤自备电厂标志">
        <el-input v-model="formInline.selfOwnedPlantFlag" placeholder="请输入" clearable class="right-align-input" />
    </el-form-item>
    <el-form-item label="合同容量">
        <el-input v-model="formInline.contractCapacity" placeholder="请输入" clearable  class="right-align-input"/>
    </el-form-item>
    <el-form-item label="业务类别">
        <el-input v-model="formInline.businessCategory" placeholder="请输入" clearable class="right-align-input" />
    </el-form-item>
    <el-form-item label="《营业执照》的经营范围">
        <el-input v-model="formInline.businessScope" placeholder="请输入" clearable  class="right-align-input"/>
    </el-form-item>
     <el-form-item label="行业分类">
        <el-input v-model="formInline.industryClassification" placeholder="请输入" clearable  class="right-align-input"/>
    </el-form-item>
    <el-form-item label="用电类别">
        <el-input v-model="formInline.powerCategory" placeholder="请输入" clearable  class="right-align-input"/>
    </el-form-item>
    <el-form-item label="规则选择">
        <el-select v-model="formInline.province" placeholder="请选择规则" style="width:169px">
          <el-option v-for="item in provinces" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    <!-- <el-form-item label="规则选择">
      <el-select v-model="formInline.province" placeholder="请选择规则" class="right-align-input" :fit-input-width="true" style="width: 150px">
          <el-option  v-for="item in provinces" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </el-form-item> -->
    <el-form-item class="query-button-container right-align-input">
      <!-- <div class="flex justify-end gap-2"> -->
      <el-button  style="background-color: #01367A;" type="primary" @click="onSubmit">推 演</el-button>
    <!-- </div> -->
    </el-form-item>
  </el-form>
</div>
<div>
  <el-table :data="tableData"
                border
                v-loading="dataLoading"
                style="width: 100%;margin-bottom: 20px;margin-top: 20px;height: 70vh">
        <el-table-column prop="powerSupplyUnit" label="供电单位" min-width="160px">
        </el-table-column>
        <el-table-column prop="userName" label="用户名称" min-width="160px">
          
        </el-table-column>
        <el-table-column prop="powerAddress" label="用电地址" min-width="100px">
        
        </el-table-column>
        <el-table-column prop="stepType"  label="阶梯类型" min-width="120px">
        </el-table-column>
        <el-table-column prop="voltageLevel"  label="运行容量" min-width="90px">
        </el-table-column>
        <el-table-column prop="userCategory" label="用户类别" min-width="100px">
        </el-table-column>
        <el-table-column prop="meteringPointId"  label="计量点编号" min-width="160px">
        </el-table-column>
        <el-table-column prop="selfOwnedPlantFlag"  label="含燃煤自备电厂标志" min-width="180px">
         
        </el-table-column>
        <el-table-column prop="contractCapacity" label="合同容量" min-width="90px">
        </el-table-column>
        <el-table-column prop="businessCategory" label="业务类别" min-width="100px">
        </el-table-column>
        <el-table-column prop="businessScope"  label="《营业执照》的经营范围" min-width="180px">
        </el-table-column>
        <el-table-column prop="priceCodeName"  label="电价代码名称" min-width="120px">
        </el-table-column>
        <el-table-column prop="iceStorageFlag"  label="冰蓄冷标志" min-width="110px">
        </el-table-column>
        <el-table-column prop="transmissionPriceCategory"  label="输配电价" min-width="100px">
        </el-table-column>
        <el-table-column prop="meteringPointCapacity"  label="计量点容量" min-width="120px">
        </el-table-column>
        <el-table-column prop="meteringMethod"  label="计量方式" min-width="90px">
        </el-table-column>
        <el-table-column prop="meteringPointUsage"  label="计量点用途" min-width="120px">
        </el-table-column>
        <el-table-column prop="pfAssessment"  label="功率因数考核" min-width="120px">
        </el-table-column>
        <el-table-column prop="energyCalculationMethod"  label="电量计算方式" min-width="120px">
        </el-table-column>
        <el-table-column prop="basicFeeCalculation"  label="基本电费计算" min-width="120px">
        </el-table-column>
        <el-table-column prop="transformerLossBillingFlag"  label="变损计费标志" min-width="120px">
        </el-table-column>
        <el-table-column prop="highEnergyUserFlag"  label="高耗能用户标志" min-width="180px">
        </el-table-column>
        <el-table-column prop="transformerLossSharingMethod"  label="变损分摊方式" min-width="160px">
        </el-table-column>
        <el-table-column prop="lineLossCalculationMethod"  label="线损计算方式" min-width="160px">
        </el-table-column>
        <el-table-column prop="lineLossSharingFlag"  label="线损分摊标志" min-width="160px">
        
        </el-table-column>
        <el-table-column prop="timeOfUseBillingFlag"  label="分时计费标志" min-width="180px">
        </el-table-column>
        <el-table-column prop="marketClassification"  label="市场化属性分类" min-width="180px">
        </el-table-column>
        <el-table-column prop="specialUserFlag"  label="特殊用户标志" min-width="140px">
        </el-table-column>
        <el-table-column prop="industryClassification"  label="行业分类" min-width="130px">
        </el-table-column>
      
        <el-table-column prop="powerCategory"  label="用电类别" min-width="100px">
        </el-table-column>
        <el-table-column prop="powerMode"  label="变电站" min-width="140px">
        </el-table-column>
        <el-table-column prop="powerLine"  label="线路线段" min-width="130px">
        </el-table-column>
        <el-table-column prop="powerArea"  label="台区" min-width="130px">
        </el-table-column>
      </el-table>
      <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
      />
</div>
    <!-- <el-card style="height: 86vh">
      <el-row>
        <el-col>
          <el-date-picker
            v-model="gkDate"
            type="date"
            @change="handleTimePickChange"
            value-format="YYYY-MM-DD"
            format="YYYY年MM月DD日"
            placeholder="选择日期"
          >
          </el-date-picker>
          <el-select
          style="width: 10%;margin-left: 20px;"
          v-model="region"
          placeholder="请选择时段"
          clearable
        >
            <el-option label="0-8" value="0-8" />
            <el-option label="8-14" value="8-14" />
            <el-option label="14-19" value="14-19" />
            <el-option label="19-24" value="19-24" />
        </el-select>
        <el-button style="margin-left:20px" type="primary" @click="onSubmit">查 询</el-button>
        </el-col>
       
      </el-row>
  
      <el-input
        type="textarea"
        style="margin-top: 20px"
        :rows="16"
        v-model="gkDesc"
        v-loading="dataLoading"
      ></el-input>
      <el-button type="primary" style="margin-top: 20px" @click="copy"
        >复制</el-button
      >
    </el-card> -->
  </template>
  <script setup>
  import { onMounted, reactive, ref } from "vue";
  import utils from "@/utils/utils";
  import store from "@/store";
  import {
    createDailyData,
    getAll,
    getPeriodicData,
    getPeriodic,
    getruleNum,
  } from "@/api/work-order";
  import { isSameDate } from "@/utils/common";
  
  let headers = {};
  const upLoadLoading = ref(false);
  const UploadExcelDialogShow = ref(false);
  const total = ref(0);
  const page = ref(1);
  const size = ref(10);
  const tableData = ref([]);
  const dataLoading = ref(false);
  const selectTimeDialogShow = ref(false);
  const timeModelValue = ref("");
  const gkDate = ref("");
  const gkDesc = ref("");
  const region=ref('');
  const formInline = reactive({
    powerSupplyUnit: '',
    userName: '',
    powerAddress: '',
    operationCapacity:"",
    userCategory:'',
    meteringPointId:'',
    meteringPointLocation:'',
    selfOwnedPlantFlag:"",
    contractCapacity:'',
    businessCategory:"",
    businessScope:"",
    industryClassification:"",
    powerCategory:"",
    province:""
})
const provinces = [
  { value: '1', label: '电价代码名称' },
  { value: '2', label: '冰蓄冷标志' },
  { value: '3', label: '输配电价类别' },
  { value: '4', label: '输配电价' },
  { value: '5', label: '计量点容量' },
  { value: '6', label: '计量方式' },
  { value: '7', label: '计量点用途' },
  { value: '8', label: '功率因数考核' },
  { value: '9', label: '功率因数标准' },
  { value: '10', label: '电量计算方式' },
  { value: '11', label: '基本电费计算' },
  { value: '12', label: '变损计费标志' },
  { value: '13', label: '高耗能用户标志' },
  { value: '14', label: '变损分摊方式' },
  { value: '15', label: '交易转电网代购标志' },
  { value: '16', label: '线损计算方式' },
  { value: '17', label: '线损分摊标志' },
  { value: '18', label: '分时计费标志' },
  { value: '19', label: '市场化属性分类' },
  { value: '20', label: '特殊用户标志' },
  { value: '21', label: '行业分类' },
  { value: '22', label: '用电类别' },
 
];
  const truncateString = (str, maxLength = 10) => {
    if (str.length > maxLength) {
      return str.substring(0, maxLength) + "...";
    }
    return str;
  };
  
  
  // const getTime = async () => {
  //   gkDate.value = (await getPeriodic()).substring(0, 10);
  // };
  // getTime().then(() => {
  //   getData();
  // });
  
  const onSubmit =  () => {
    dataLoading.value = true
    let val =formInline.province
    getruleNum({},val).then((res)=>{
      tableData.value = res.data.content
      total.value = res.data.content.length
    })
   
    
    dataLoading.value = false
  }
  

//   getTime()
 

  
  /**
   * size 改变触发
   */
  const handleSizeChange = currentSize => {
    size.value = currentSize
    onSubmit()
  }
  /**
   * 页码改变触发
   */
  const handleCurrentChange = currentPage => {
    page.value = currentPage
    onSubmit()
  }
  
  onMounted(() => {
    headers = { "X-Token": store.getters.token };
  });
  </script>
  <style scoped >
  .form-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
   
  }
  .form-container .el-select .el-select__wrapper {
    width: 170px;
  }
  /* .form-container .el-select {
  --el-select-width: 220px;
} */
  .form-container .el-input {
  --el-select-width: 220px;
}
  /* 查询按钮容器样式 */
.query-button-container {
  display: flex;
  justify-content: flex-end;
  /* margin-top: 20px; */
}
  /* 输入框右对齐样式 */
  .right-align-input {
  display: flex;
  justify-content: flex-end;
}
  /* 响应式布局 */
  @media (max-width: 768px) {
    .demo-form {
      label-width: 80px;
    }
  }
  
  @media (max-width: 576px) {
    .demo-form {
      label-width: 60px;
    }
  }
  </style>  